<!DOCTYPE html>
 
<html>
      <head>
        <title>{{.title}}</title>
        <link rel="shortcut icon" href="/static/img/favicon.png" /> 
        <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css"/>
        <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> 
        <script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script> 
      </head>       
    <body>
       <div class="container">
        <!--请求得到字典数据--> 
        <div style="width:100%;height:50px;">
            <input type="text" id="search" placeholder="请输入参数"/>
            <button onclick="getparams()" class="btn btn-primary">得到参数</button>
            <label id="txtparams"></label>
        </div>
        <!--请求得到Json数据--> 
        <div style="width:100%;height:50px;">
          <button onclick="getjson()" class="btn btn-primary">得到Json</button>
          <label id="txtjson"></label>
        </div>
        <!--请求得到Xml数据--> 
        <div style="width:100%;height:50px;">
            <button onclick="getxml()" class="btn btn-primary">得到Xml</button>
            <label id="txtxml"></label>
        </div>
        <!--请求得到Yaml数据--> 
        <div style="width:100%;height:50px;">
          <button onclick="getYaml()" class="btn btn-primary">得到Yaml</button>
          <label id="txtyaml"></label>
        </div>       
       </div>
       
        <!--JS部分-->
        <script type="text/javascript">
         //得到参数
         function getparams(){
            $.ajax({
               type:'get',
               url:'/api/paramsdata',//此处的是json数据的格式
               data:{
                search:$("#search").val()
               },
               success:function(result){
                   console.log('获取参数的数据')
                   console.log(result)
                  $("#txtparams").html("记录总数:"+result.count
                   +",记录I:"+result.datalist[0].first_name+result.datalist[0].last_name+",记录II:"
                   +result.datalist[1].first_name+result.datalist[1].last_name+"...");
               } 
            })
          }
          //得到Json
          function getjson(){
            $.ajax({
               type:'get',
               url:'/api/jsondata',
               dataType:'json',//此处的是json数据的格式
               data:{
                 search:$("#search").val()
               },
               success:function(result){
                   console.log('获取json的数据')
                   console.log(result)
                   $("#txtjson").html("json的结果："+result.count
                   +",记录1:"+result.datalist[0].first_name+result.datalist[0].last_name+",记录2:"
                   +result.datalist[1].first_name+result.datalist[1].last_name+"...");
               } 
            })
          }
          //得到Xml
          function getxml(){
            $.ajax({
               type:'get',
               url:'/api/xmldata',
               dataType:'xml',//此处的是xml数据的格式
               data:{
                 search:$("#search").val()
               },
               success:function(result){
                   console.log('获取xml的数据')
                   console.log(result)
                   
                 $("#txtxml").html("xml的结果："+$(result).text());
               } 
            })
          }
           //得到yaml
           function getYaml(){
            $.ajax({
               type:'get',
               url:'/api/yamldata', 
               data:{
                search:$("#search").val()
               },
               success:function(result){
                   console.log('获取yaml的数据')
                   console.log(result)
                  $("#txtyaml").html("yaml的结果:"+result);
               } 
            })
          }
         
        </script>
    </body>
</html>